<template>
    <div>
        <div class="search">
            <Input search enter-button placeholder="Enter something..." />
        </div>
        <!-- 卡片区 -->
        <div class="content">
        <card-vue v-for="(item,index) in cardInfo" :key="item.id" :cardInfo="item" :activeIndex="index" :isActive="index==ActiveCardNum" />
        </div>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import CardVue from '../components/card.vue'

export default {
    name: 'password',
    data() {
        return {

        }
    },
    components: {
        CardVue,
    },
    computed: {
        ...mapState(['cardInfo', 'ActiveCardNum']),
    },
}
</script>

<style scoped>
.search {
    padding: 20px 30px;
    width: 20%;
}
.content {
    padding-left: 30px;
    display: flex;
    flex-wrap: wrap;
}
</style>
